<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {CodeTypes, SubmitPutDTO} from "@/model/submit.js";
import {r_p_getByPoolId} from "@/request/api/pool.js";
import {r_s_put} from "@/request/api/submit.js";
import {diffTagText, diffTagType, PoolVO} from "@/model/pool.js";
import {ElMessage} from "element-plus";
import {SJOJLogo} from "@/model/uri.js";
import {SubmitWebSocket} from "@/model/websocket.js";
import {useLoginStorage} from "@/stores/loginStorage.js";

const route = useRoute();
const router = useRouter();
const loginStore = useLoginStorage();

const poolVO = ref({...PoolVO});
const submitPutDTO = ref({...SubmitPutDTO});
const isCompiling = ref(false);
const solveErrorMsg = ref('');

const getPoolVO = () => {
  r_p_getByPoolId(route.params.poolId).then(data => {
    poolVO.value = data;
  });
}

const put = () => {
  solveErrorMsg.value = '';

  submitPutDTO.value.userId = loginStore.getUserInfo.userId;
  submitPutDTO.value.poolId = poolVO.value.poolId;

  r_s_put(submitPutDTO.value).then(id => {
    ElMessage.success('提 交 成 功');
    isCompiling.value = true;

    const sws = new SubmitWebSocket(id, (rs) => {
      if (rs.code === 1)
        router.push(`/submit/info-${id}`);
      else
        solveErrorMsg.value = rs.msg;
      sws.close();
      isCompiling.value = false;
    });
  });
}

onMounted(() => {
  submitPutDTO.value.poolId = poolVO.value.poolId = route.params.poolId;
  submitPutDTO.value.codeType = CodeTypes[0];
  if (poolVO.value.poolId === 0) return;
  getPoolVO();
});

</script>

<template>
  <div class="index-all">
    <div class="head">
      <div class="head-left">
        <el-link href="/hub">
          <img :src="SJOJLogo" alt="SJ-OJ" height="50px" title="首页"/>
        </el-link>
      </div>
      <div class="head-center">
        <span v-show="isCompiling">
        正在解题中<span v-loading="isCompiling"></span>
        </span>
      </div>
      <div class="head-right">
        <el-button type="success" @click="put" :disabled="isCompiling">提 交</el-button>
      </div>

    </div>

    <div class="main">
      <div class="main-left">
        <el-descriptions :column="1">
          <el-descriptions-item>
            <div>
              <span class="title">{{ poolVO.poolId + '. ' }}{{ poolVO.title }}</span>
              &nbsp;
              <el-tag :type="diffTagType(poolVO.difficulty)" effect="dark">
                {{ diffTagText(poolVO.difficulty) }}
              </el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item/>
          <el-descriptions-item>
            <div v-html="poolVO.description"/>
          </el-descriptions-item>
          <el-descriptions-item/>
        </el-descriptions>
      </div>

      <div class="main-right">
        <div class="tab-right">
          <el-select class="code-type" v-model="submitPutDTO.codeType" size="small">
            <el-option v-for="(type, index) in CodeTypes" :key="index" :value="type"/>
          </el-select>
        </div>
        <div class="edit">
          <el-input type="textarea" v-model="submitPutDTO.code" :rows="25" resize="none"/>
        </div>
        <div class="solve-tip" v-if="solveErrorMsg !== ''">
          解题失败。错误信息："{{ solveErrorMsg }}"。
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
div, p, span {
  color: black;
}

.head {
  min-height: 50px;
  height: 50px;
  max-height: 50px;
  display: flex;
  border-bottom: 1px groove;
}

.head-left {
  width: 20%;
  height: 50px;
  max-height: 50px;
  text-align: left;
  padding-left: 10px;
}

.head-center {
  width: 30%;
  height: 50px;
  max-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px groove;
  border-right: 1px groove;
  padding-left: 10px;
}

.head-right {
  width: 30%;
  height: 50px;
  max-height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
}

.main {
  margin-top: 10px;
  min-height: 680px;
  display: flex;
  justify-content: center; /* 高度会100% */
}

.main-left {
  width: 50%;
  padding: 5px;
  border-right: groove 1px;
  overflow: auto;
}

.main-right {
  width: 50%;
  padding: 5px;
  border-left: groove 1px;
}

.title {
  display: inline-block;
  height: 30px;
  font-weight: bold;
  font-size: 28px;
}

:deep(strong) {
  font-weight: bold;
  padding: 0 5px 0 5px;
}

.tab-right {
  margin-bottom: 5px;
  height: 30px;

}

.code-type {
  width: 120px;
}

.solve-tip {
  padding-top: 5px;
  color: red;
  overflow: auto;
}

</style>

